<template>
  <uni-popup ref="rulePopup" background-color="#fff" :mask-click="false">
    <view class="popup-content rule">
      <view class="title">活动免责声明</view>
      <view class="content">
        <!-- 放富文本内容 -->
        <view class="rich-text">
          <rich-text :nodes="props.know"></rich-text>
        </view>
        <view class="bottom-btn">
          <!-- 勾选协议 -->
          <view class="m-bottom-22">
            <cc-protocolBox
              :agree="data.agree"
              :protocolArr="data.protocolArr"
              @click="data.agree = !data.agree"
              @protocolClick="protocolClick"></cc-protocolBox>
          </view>
          <!-- 确认按钮 -->
          <button
            :style="{
              background: data.configInfo.button_color1 || '#d92121',
              color: data.configInfo.button_color1_text || '#ffffff',
            }"
            :disabled="!data.agree"
            :class="['btn', !data.agree ? 'disabled' : '']"
            @click="handleModalRuleClose">
            请阅读全文并确认
          </button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const data = reactive<any>({
  agree: false, // 是否确认阅读报名协议
  protocolArr: ['《活动免责声明》'],
  configInfo: {}, // 全局配置信息
});
const rulePopup = ref<any>(null);

const props = defineProps<{
  know: string;
}>();

const emit = defineEmits(['protocolClick']);
const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
if (configInfo) {
  data.configInfo = configInfo;
}

const protocolClick = (tag: string) => {
  emit('protocolClick', tag);
};

const handleModalRuleClose = () => {
  rulePopup.value?.close?.();
};

const openRuleDialog = () => {
  rulePopup.value?.open?.('center');
};

defineExpose({
  open: openRuleDialog,
  protocolClick,
});
</script>

<style lang="scss" scoped>
// 弹窗相关
.popup-content {
  @mixin flex-l-c {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  @include flex-l-c;
  padding: 15px;
  height: 500rpx;
  background-color: #fff;
  // 须知相关样式
  &.rule {
    width: calc(680rpx - 30px);
    height: 1080rpx;
    .content {
      justify-content: space-between;
      overflow-y: auto;
      .rich-text {
        flex: 1;
        width: 100%;
        overflow-y: auto;
      }
      .bottom-btn {
        width: 100%;
        .btn {
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          text-align: center;
          background: $danger;
          border-radius: 20rpx;
          font-size: 34rpx;
          color: #ffffff;
          &.disabled {
            opacity: 0.5;
          }
        }
      }
    }
  }
  .title {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: $fs-34;
    font-weight: bold;
    position: relative;
    .close {
      position: absolute;
      top: 0;
      right: 0;
    }
    .rule {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .content {
    width: 100%;
    flex: 1;
    @include flex-l-c;
    justify-content: center;
    .btns {
      text-align: center;
      .btn {
        line-height: 88rpx;
        text-align: center;
        color: white;
        font-size: $fs-34;

        &.leader {
          width: 488rpx;
          height: 88rpx;
          border-radius: 20rpx;
        }

        &.player {
          width: 488rpx;
          height: 88rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}
</style>
